Extracted all remaining strings to en.json

- Changed SATS to SAT, and hours to hr to be more international
- Edited conversion fee warning because it was incorrect (you only pay a fee if
  you're converting between BTC<->Liquid<->Lightning)

1 files changed, 28 insertions, 29 deletions

diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index e4d7b0bf..47da398d 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
 	import { user, colorTheme } from '$lib/store';
+  import { _ } from 'svelte-i18n';
 
 	let setting = 'account';
 	let password;
@@ -27,30 +28,30 @@
 	<AppHeader />
 
 	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Settings</h1>
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">{$_('user.settings.header')}</h1>
 
 		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
 			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
-				>ACCOUNT</button
+				>{$_('user.settings.ACCOUNT')}</button
 			>
 
 			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
-				>POINT OF SALE</button
+				>{$_('user.settings.POINT_OF_SALE')}</button
 			>
 
 			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
-				>SECURITY</button
+				>{$_('user.settings.SECURITY')}</button
 			>
 		</div>
 
 		{#if setting === 'account'}
 			<div>
-				<label for="language" class="font-bold block mb-1">Language</label>
+				<label for="language" class="font-bold block mb-1">{$_('user.settings.locale')}</label>
 				<LocaleSelector style="block py-3 w-full" />
 			</div>
 
 			<div>
-				<label for="username" class="font-bold mb-1 block">Username</label>
+				<label for="username" class="font-bold mb-1 block">{$_('user.settings.username')}</label>
 				<input
 					type="text"
 					disabled
@@ -61,7 +62,7 @@
 			</div>
 
 			<div class="relative">
-				<label for="password" class="block font-bold block mb-1">New Password</label>
+				<label for="password" class="block font-bold block mb-1">{$_('user.settings.newPassword')}</label>
 				{#if revealPassword}
 					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
 				{:else}
@@ -77,34 +78,33 @@
 			</div>
 
 			<div>
-				<label for="address" class="font-bold mb-1 block">Business Address</label>
+				<label for="address" class="font-bold mb-1 block">{$_('user.settings.businessAddress')}</label>
 				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
 			</div>
 
 			<div>
 				<div class="flex justify-between items-center">
-					<span class="font-bold">Email Notifications</span>
+					<span class="font-bold">{$_('user.settings.emailNotifications')}</span>
 					<Toggle id="email-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					Get notified via email when a change occurs on your account or when people send you
-					payments.
+          {$_('user.settings.emailNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
 				<div class="flex justify-between items-center">
-					<span class="font-bold">SMS Notifications</span>
+					<span class="font-bold">{$_('user.settings.smsNotifications')}</span>
 					<Toggle id="sms-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					CoinOS will send you text notifications when this is enabled.
+					{$_('user.settings.smsNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
-				<span class="font-bold mb-1 block">Color Theme</span>
-				<p class="text-secondary mb-1">Select from the default color themes.</p>
+				<span class="font-bold mb-1 block">{$_('user.settings.theme')}</span>
+				<p class="text-secondary mb-1">{$_('user.settings.themeDescription')}</p>
 				{#each colorThemes as colors}
 					<button
 						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
@@ -117,52 +117,51 @@
 			</div>
 		{:else if setting === 'pos'}
 			<div>
-				<label for="currency" class="font-bold block mb-1">Local Currency</label>
+				<label for="currency" class="font-bold block mb-1">{$_('user.settings.localCurrency')}</label>
 				<select name="currency" class="block py-3 w-full">
 					<option value="USD">USD</option>
 				</select>
 			</div>
 
 			<div>
-				<label for="btc-unit" class="font-bold block mb-1">Display bitcoin in:</label>
+				<label for="btc-unit" class="font-bold block mb-1">{$_('user.settings.btcUnit')}</label>
 				<select disabled name="btc-unit" class="block py-3 w-full">
-					<option value="SATS">Satoshi (SATS)</option>
+					<option value="SATS">Satoshi (SAT)</option>
 					<option value="BTC">Bitcoin (BTC)</option>
 				</select>
 			</div>
 		{:else}
 			<div>
-				<span class="font-bold mb-1">Security Pin</span>
+				<span class="font-bold mb-1">{$_('user.settings.securityPIN')}</span>
 				<p class="text-secondary mb-1">
-					Set a security pin that will be used to unlock your settings and to send outgoing
-					payments.
+					{$_('user.settings.securityPINDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="lock" style="mr-1" /> Set Pin</button
+					><Icon icon="lock" style="mr-1" /> {$_('user.settings.setPIN')}</button
 				>
 			</div>
 
 			<div>
-				<label for="auto-lock" class="font-bold mb-1">Auto-Lock Timer</label>
+				<label for="auto-lock" class="font-bold mb-1">{$_('user.settings.autoLock')}</label>
 				<p class="text-secondary mb-1">
-					Your account will go into a secure mode automatically after a specified time:
+					{$_('user.settings.autoLockDescription')}
 				</p>
 				<select name="auto-lock" class="block py-3 w-full">
 					<option value="5">5 min</option>
 					<option value="10">10 min</option>
 					<option value="30">30 min</option>
-					<option value="60">1 hour</option>
-					<option value="480">8 hours</option>
+					<option value="60">1 h</option>
+					<option value="480">8 h</option>
 				</select>
 			</div>
 
 			<div>
-				<span class="font-bold mb-1">2-Factor Authentication</span>
+				<span class="font-bold mb-1">{$_('user.settings.twofa')}</span>
 				<p class="text-secondary mb-1">
-					Add an extra level of security to your device by enableing 2-factor authentication.
+					{$_('user.settings.twofaDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="mobile" style="mr-1" /> Set up 2FA</button
+					><Icon icon="mobile" style="mr-1" /> {$_('user.settings.twofaSetup')}</button
 				>
 			</div>
 		{/if}